<%@page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <html>
 <head>
 <title>YUI DataTable</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/scripts/yui/build/fonts/fonts-min.css" />
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/scripts/yui/build/datatable/assets/skins/sam/datatable.css"> 
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/scripts/yui/build/paginator/assets/skins/sam/paginator.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/scripts/yui/build/button/assets/skins/sam/button.css">

<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/element/element-beta-min.js"></script> 
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/datasource/datasource-min.js"></script> 
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/paginator/paginator-min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/button/button-min.js"></script>
 
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/json/json-min.js"></script> 
 <script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/connection/connection-min.js"></script> 
 <script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/get/get-min.js"></script> 
 <script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/dragdrop/dragdrop-min.js"></script> 
 <script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/calendar/calendar-min.js"></script> 
 <script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/datatable/datatable-min.js"></script> 
 
</head>
<body class="yui-skin-sam"> 
<tr> 
          <td width="50%" height="35" align="right"> <input name="searchwords"  id="searchwords" type="text" size="30"> 
          </td>
          <td width="0%" align="right">&nbsp;</td>
          <td width="50%" height="35"><div id="secarchbutton"> </div></td>
        </tr>
<div id="paginationContainerTop"></div>
<div id="DataTableYUI"></div>
<div id="paginationContainerBottom"></div>
 

 <script type="text/javascript"> 

   YAHOO.example.DynamicData = ( function() {

	var searchbutton = new YAHOO.widget.Button({ label:"搜索", id:"searchbutton", container:"secarchbutton" });
    searchbutton.on("click", onButtonClick);

	function onButtonClick(p_oEvent) {
 			myDataSource.sendRequest('searchwords='+document.getElementById("searchwords").value, oCallback);
 			myDataTable.initializeTable(); 
			myDataTable.render(); 
            myDataTable.showTableMessage("<center>正在加载数据,请稍候...</center>");
         }

        myDataSource = new YAHOO.util.DataSource("yui_product_json.jsp?");
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
		myDataSource.connXhrMode = "queueRequests";
        myDataSource.responseSchema = { 
	    resultsList : "records",  
	    fields : [
            {key:"productId"},
            {key:"productName"},
            {key:"productDate"},
            {key:"price",parser:"number"},
            {key:"quantity",parser:"number"}
        ],
		metaFields: {
                totalRecords: "totalRecords"
            }
	   }; 
	 
 	   var imgFormatter = function(elCell, oRecord, oColumn, oData) {
               var imginfo = oData; 
               elCell.innerHTML = "<img width=12 height=12 src=" + imginfo + "></img>";
            };

      YAHOO.widget.DataTable.Formatter.imginfoFormatter = imgFormatter;
  
	  var myColumnDefs = [ 
        {key:"productId", label:"产品ID", sortable:false},
        {key:"productName", label:"产品名称", sortable:true},
        {key:"productDate", label:"生产日期", sortable:true},
        {key:"price", label:"单价", sortable:true},
        {key:"quantity", label:"数量", sortable:true}
    ];

    var t0="{FirstPageLink}&nbsp;&nbsp;{PreviousPageLink}&nbsp;&nbsp;{NextPageLink}&nbsp;&nbsp;{LastPageLink}&nbsp;&nbsp;";
    t0+="{CurrentPageReport}";

    var t2 = "第&nbsp;{currentPage}&nbsp;页&nbsp;&nbsp;总页数:&nbsp;{totalPages}&nbsp;&nbsp;总记录数:&nbsp;{totalRecords}&nbsp;&nbsp;";

	var myConfigs = { 
         initialRequest:"sort=productId&dir=asc&startIndex=0&results=15",
		 dynamicData: true, 
		 MSG_LOADING:"<center>正在加载数据,请稍候...</center>",
         MSG_EMPTY:"没有相关记录",
		 MSG_SORTASC:"以升序方式排序",
		 MSG_SORTDESC:"以降序方式排序",
		 paginator: new YAHOO.widget.Paginator({
                    rowsPerPage: 15,
					containers : ['paginationContainerTop', 'paginationContainerBottom'],
					//PageLinks : YAHOO.widget.Paginator.VALUE_UNLIMITED,
					firstPageLinkLabel : "第一页", 
                    lastPageLinkLabel : "尾页", 
                    previousPageLinkLabel:"上一页",
                    nextPageLinkLabel:"下一页",
					template: t0,
 					pageReportTemplate: t2
                })
	}; 
       
    this.myDataTable = new YAHOO.widget.DataTable("DataTableYUI", myColumnDefs,myDataSource,myConfigs);
	this.myDataTable.subscribe("rowMouseoverEvent", this.myDataTable.onEventHighlightRow);
    this.myDataTable.subscribe("rowMouseoutEvent", this.myDataTable.onEventUnhighlightRow);
	
	myDataTable.hideColumn("productId");

	// Subscribe to events for row selection
	myDataTable.subscribe("rowMouseoverEvent", myDataTable.onEventHighlightRow);
	myDataTable.subscribe("rowMouseoutEvent", myDataTable.onEventUnhighlightRow);
	myDataTable.subscribe("rowClickEvent", myDataTable.onEventSelectRow);

	// Programmatically select the first row
	myDataTable.selectRow(myDataTable.getTrEl(0));
	// Programmatically bring focus to the instance so arrow selection works immediately
	myDataTable.focus();

	var oCallback = { 
        success: function(sRequest, oResponse, oPayload){
            myDataTable.onDataReturnInitializeTable(sRequest,oResponse,oPayload) ;
              var paginator = this.get('paginator');
              paginator.set('totalRecords', oResponse.results.length);
             }, 
	    failure : function(sRequest, oResponse, oPayload){
            myDataTable.onDataReturnInitializeTable(sRequest,oResponse,oPayload) ;
              var paginator = this.get('paginator');
              paginator.set('totalRecords', oResponse.results.length);
             }, 
	    scope : myDataTable 
	}; 

	return {
			ds: myDataSource,
			oDTStandardSelect: myDataTable,
			dt: myDataTable
		};

   })();
  </script> 
 </body>
</html>